<template>
  <div class="videos" @click="toVideo">
    <div class="cover">
      <img class="img" v-lazy="pic+coverSize" />
      <div class="count">
        <span class="duration">{{ duration | formatTime }}</span>
        <span>{{ view | formatNumber }}观看</span>
        <span>{{ danmaku | formatNumber }}弹幕</span>
      </div>
    </div>
    <div class="title">{{ title }}</div>
  </div>
</template>

<script>
import { formatTime, formatNumber } from '@/filters/filters.js'
export default {
  name: 'PostVideo',
  inject: ['rootRouter'],
  props: {
    // 视频aid
    aid: {
      type: [Number, String]
    },
    // 视频bvid
    bvid: {
      type: [Number, String]
    },
    // 视频标题
    title: {
      type: String
    },
    // 封面图
    pic: {
      type: String
    },
    // 封面图尺寸
    coverSize: {
      type: String,
      default: '@702w_394h'
    },
    // 时长
    duration: {
      type: [Number, String]
    },
    // 播放量
    view: {
      type: Number
    },
    // 弹幕数
    danmaku: {
      type: Number
    }
  },
  filters: {
    formatTime,
    formatNumber
  },
  methods: {
    toVideo () {
      this.rootRouter.push({ name: 'video', params: { bvid: this.bvid } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .videos{
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    margin-bottom: rem(10px);
    .cover{
      @include cover(702, 394, rem(4px));
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
      .count {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: rem(56px);
        padding: {
          left: rem(10px);
          bottom: rem(10px);
        }
        box-sizing: border-box;
        font-size: rem(12px);
        color: $color-white;
        background-image: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 100%);
        span{
          margin-right: rem(10px);
        }
        .duration {
          border-radius: rem(2px);
          padding: 0 rem(2px);
          background: rgba(0,0,0,0.5);
        }
      }
    }
    .title{
      margin-top: rem(6px);
      font-size: rem(14px);
      @include max-lines(1);
    }
  }
</style>
